.home-container {
    height: 100vh;
    width: 100vw;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.section {
    height: 100vh;
    width: 100%;
    transition: all 0.4s cubic-bezier(.4,2,.6,1);
    scroll-snap-align: start;
}

.section-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #000;
    overflow: hidden;
}


.section-2 {
    background-color: skyblue;
}

.section-3 {
    background-color: greenyellow;
}

.iframe-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

.cube-border {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%);
    border: 4px solid red;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 0;
    pointer-events: none;
    opacity: 4;
    transition: border-color 0.5s, opacity 0.5s;
}

.iframe-wrapper iframe {
    max-width: 100vw;
    max-height: 100vh;
    border: none;
    transition: all 1s linear;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(0.2);
    transform: translate(-50%, -50%);
    z-index: 3;
}


.section-1.out .iframe-wrapper iframe {
    transform: scale(0.2); /* 300/1000=0.3，假设section高度1000px */
}

/* .cube-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%) rotateX(30deg) rotateY(30deg);
    background: linear-gradient(135deg, #4e54c8, #8f94fb);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 3;
    border-radius: 8px;
    opacity: 0.5;
} */

.section-1.out {
    animation: section1-out-fade 2s forwards;
}

@keyframes section1-out-fade {
    0% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 0.7;
        filter: blur(2px);
    }
}

.section-1.out .cube-bg {
    border: 4px solid #fff;
    transition: all 0.5s;
    opacity: 0.8;
}

.cube-cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
}

.cube-face {
  position: absolute;
  width: 500px;
  height: 500px;
  border: 4px solid red;
  background: transparent;
  box-sizing: border-box;
  opacity: 1;
}

.cube-face-front  { transform: rotateY(0deg) translateZ(150px); }
.cube-face-back   { transform: rotateY(180deg) translateZ(150px); }
.cube-face-right  { transform: rotateY(90deg) translateZ(150px); }
.cube-face-left   { transform: rotateY(-90deg) translateZ(150px); }
.cube-face-top    { transform: rotateX(90deg) translateZ(150px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(150px); }


